<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import {
  getProjectStatistics
} from "@/api/file";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox, ElTable } from "element-plus";
import type { FormRules } from "element-plus";

defineOptions({
  name: "task"
});

const searchProjectName = ref("");
const searchCreater = ref("");
const router = useRouter();
const tableData = ref([]);
const loading = ref(false);

const pagination = ref({
  total: 0,
  pageNum: 1,
  pageSize: 10,
})
const getStatusColor = (status) => {
  switch (status) {
    case 'running':
      return 'green';   // 运行中 -> 绿色
    case 'stopped':
      return 'red';     // 停止 -> 红色
    case 'completed':
      return 'blue';    // 完成 -> 蓝色
    case 'failed':
      return 'red';   //   失败 -> 绿色
    case 'timeout':
      return 'yellow';   //   失败 -> 绿色
    default:
      return 'gray';    // 默认 -> 灰色
  }
}

const getList = async () => {
  console.log('getList', searchProjectName.value, searchCreater.value, pagination.value);
  try {
    loading.value = true;
    const res = await getProjectStatistics({
      projectName: searchProjectName.value,
      creater: searchCreater.value,
      pageNum: pagination.value.pageNum,
      pageSize: pagination.value.pageSize
    });

    loading.value = false;
    if (res.success) {
      tableData.value = res.data.list;
      pagination.value.total = res.data.total;
    } else {
      ElMessage.error(res.msg);
    }
  } catch (error) {
    loading.value = false;
    ElMessage.error(error);
  }
};

// const url = router.resolve({
//   path: '/task/taskDetail'
// });

const handleClick = (data) => {
  router.push({ name: 'taskDeail', query: { id: data.id, projectName: data.projectName } })
  // console.log(url.href);
  // window.open(url.href);  // 打开新窗口
}

const handleSizeChange = (val: number) => {
  pagination.value.pageSize = val
  getList();
}
const handleCurrentChange = (val: number) => {
  pagination.value.pageNum = val
  getList();
}

onMounted(async () => {
  await getList();
});



</script>


<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>任务记录</span>
      </div>
    </template>
    <div class="action-bar">
      <div class="flex justify-between w-full">
        <el-space>
          <el-form-item label="项目名称：" style="margin-bottom: 0;">
            <el-input v-model="searchProjectName" clearable placeholder="请输入项目名称" style=" width: 200px;" />
          </el-form-item>
          <el-form-item label="创建人" style="margin-bottom: 0;">
            <el-input v-model="searchCreater" clearable placeholder="请输入创建人" style="width: 200px;" />
          </el-form-item>
          <el-button type="primary" @click="getList">搜索</el-button>
        </el-space>
      </div>
    </div>
    <el-table ref="singleTableRef" v-loading="loading" :data="tableData" highlight-current-row stripe border
      style="width: 100%">
      <el-table-column type="index" width="80" label="序号" />
      <el-table-column prop="projectName" label="项目名称" sortable />
      <el-table-column prop="latestRunUser" label="最新执行人" sortable />
      <el-table-column prop="executionCount" label="执行次数" sortable />
      <el-table-column prop="status" label="状态" sortable>
        <template #default="scope">
          <span :style="{
            width: '10px',
            height: '10px',
            borderRadius: '50%',
            display: 'inline-block',
            marginRight: '8px',
            backgroundColor: getStatusColor(scope.row.status)
          }"></span>
          {{ scope.row.status }}
        </template>
      </el-table-column>
      <el-table-column prop="slaverIp" label="负载机IP" sortable />
      <el-table-column fixed="right" label="操作" width="160">
        <template #default="scope">
          <el-link type="primary" target="_blank" @click="handleClick(scope.row)">查看详情</el-link>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex justify-end mt-[10px]">
      <el-pagination background layout="sizes, prev, pager, next, total" :total="pagination.total" :default-page-size="10"
        :current-page="pagination.pageNum" @update:current-page="handleCurrentChange" @size-change="handleSizeChange" />
    </div>

  </el-card>
</template>

<style lang="scss" scoped>
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}

.action-bar {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-action {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>
